<script setup lang="ts">
import {onMounted, ref} from 'vue';
import {useRoute} from "vue-router";
import {Toast} from "vant";
import myAxios from "../plugins/myAxios";
import qs from 'qs';

const route = useRoute();
const {tags} = route.query;
//定义用户列表
const userList = ref([]);

// 使用勾子
// 当页面的dom元素加载好之后，就执行从远程获取数据的方法
onMounted(async () => {
  // 请求地址
  const userListData = await myAxios.get('/user/search/tags', {
    params: {
      tagNameList: tags
    },
    // parmas 序列化
    paramsSerializer: params => {
      return qs.stringify(params, {indices: false})
    }
  })
      // myAxios.get('/user/search/tags', {
      //   params: {
      //     // 要传入的参数
      //     tagNameList: tags
      //   },
      //   // 添加序列化代码
      //   paramsSerializer: params => {
      //     return qs.stringify(params, { indices: false });
      //   }
      // })
      // then 相对于 异常的 finally，即无论成功还是失败都会去执行
      .then(function (response) {
        console.log('/user/search/tags succeed', response);
        // showSuccessToast('请求成功');
        // data有可能为空，加一个问号防止报错
        return response?.data;
      })
      // 出现问题就抛出异常
      .catch(function (error) {
        console.error('/user/search/tags error', error);
        Toast.fail('请求失败');
      })
  console.log(userListData)
  if (userListData) {
    // 将 JSON 中的user表中的每一个用户标签转换成数组
    userListData.forEach(user => {
      // user.tags = JSON.parse(JSON.stringify(item.tags));
      if (user.tags) {
        user.tags = JSON.parse(user.tags);
      }
    })
    userList.value = userListData;
  }
})

// const mockUser = {
//   id: 5200,
//   username: 'yulian174',
//   userAccount: 'yulian174',
//   avatarUrl: 'https://foruda.gitee.com/avatar/1714887959600492555/10396122_t-ly9z_1714887959.png!avatar200',
//   gender: 0, // 表示是男生
//   phone: '13075294785',
//   email: '703453506@qq.com',
//   userRole: 0,
//   tags: ['Java', 'Python', 'C'],
//   createTime: new Date(),
//   profile: '一名精神小伙，目前还有头发,这个项目不仅是一个技术实践案例，更是连接全球学习者、打破地域限制、共同成长的学习社群平台。通过前沿的全栈技术实现，它旨在为用户提供一个集高效、安全、个性化于一体的在线学习协作环境。',
// }

// 定义用户列表
// const userList = ref([mockUser]);

//跳转到联系宇怜页面
const toYulian = () => {
  // window.location.href = 'http://qianxixi.xyz:1314/WX/index.html'; 当前页面打开
  window.open('http://qianxixi.xyz:1314/WX/index.html'); // 新页面打开
}

</script>

<template>
  <van-card
      v-for="user in userList"
      :desc="user.profile"
      :title="`${user.username}`"
      :thumb="user.avatarUrl"
  >
    <template #tags>
      <!--   外边距：margin 元素与元素之间的距离 -->
      <!--   内边距：padding 包含关系的距离 -->
      <van-tag plain type="primary"
               v-for="tag in user.tags"
               style="margin-right: 8px; margin-top: 8px">{{ tag }}
      </van-tag>
    </template>
    <template #footer>
      <van-button size="normal" @click="toYulian">联系宇怜</van-button>
    </template>
  </van-card>
  <!--  添加搜索结果为空时，显示的组件-->
  <van-empty v-if="!userList || userList.length < 1" description="搜索结果为空"/>
</template>

<style scoped>

</style>